-
Notifications
You must be signed in to change notification settings - Fork 306
dialog: Use Cupertino-flavored alert dialogs on iOS #1017
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! Comments below.
Also, please tidy up the branch's commit history for clear and coherent commits. Each commit should be clean and pass all tests (you can run our tests with tools/check
).
lib/widgets/dialog.dart
Outdated
/// Sets the dialog action to be platform appropriate | ||
/// by displaying a [CupertinoDialogAction] for IOS platforms | ||
/// and a regular [TextButton] otherwise. | ||
Widget _adaptiveAction( | ||
{required BuildContext context, | ||
required VoidCallback onPressed, | ||
required Widget child}) { | ||
final ThemeData theme = Theme.of(context); | ||
switch (theme.platform) { | ||
case TargetPlatform.android: | ||
return TextButton(onPressed: onPressed, child: child); | ||
case TargetPlatform.fuchsia: | ||
return TextButton(onPressed: onPressed, child: child); | ||
case TargetPlatform.linux: | ||
return TextButton(onPressed: onPressed, child: child); | ||
case TargetPlatform.windows: | ||
return TextButton(onPressed: onPressed, child: child); | ||
case TargetPlatform.iOS: | ||
return CupertinoDialogAction(onPressed: onPressed, child: child); | ||
case TargetPlatform.macOS: | ||
return CupertinoDialogAction(onPressed: onPressed, child: child); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be tightened up in a few ways:
-
Use empty
case
s to fall through. From the doc on Dartswitch
statements: -
Use
defaultTargetPlatform
instead of passing throughcontext
. When the app is run on a device,defaultTargetPlatform
will match the platform (iOS or Android). When we need to simulate a specific platform in tests, we setdefaultTargetPlatform
; search fordebugDefaultTargetPlatformOverride
for how we do this. -
More concise dartdoc
Also, because the logic in _dialogActionText
fits and is recommended for the Material-style dialog, let's only apply it on Android. This helper is a fine place for that conditional logic; how about changing its interface so it takes a String instead of a Widget, and applies _dialogActionText
in the Android branch. In my proposal below, I've also given _dialogActionText
an appropriately specific name, _materialDialogActionText
. That helper could even be inlined, perhaps in a followup NFC commit.
So, putting all that together:
/// Sets the dialog action to be platform appropriate | |
/// by displaying a [CupertinoDialogAction] for IOS platforms | |
/// and a regular [TextButton] otherwise. | |
Widget _adaptiveAction( | |
{required BuildContext context, | |
required VoidCallback onPressed, | |
required Widget child}) { | |
final ThemeData theme = Theme.of(context); | |
switch (theme.platform) { | |
case TargetPlatform.android: | |
return TextButton(onPressed: onPressed, child: child); | |
case TargetPlatform.fuchsia: | |
return TextButton(onPressed: onPressed, child: child); | |
case TargetPlatform.linux: | |
return TextButton(onPressed: onPressed, child: child); | |
case TargetPlatform.windows: | |
return TextButton(onPressed: onPressed, child: child); | |
case TargetPlatform.iOS: | |
return CupertinoDialogAction(onPressed: onPressed, child: child); | |
case TargetPlatform.macOS: | |
return CupertinoDialogAction(onPressed: onPressed, child: child); | |
} | |
} | |
/// A platform-appropriate action for [AlertDialog.adaptive]'s [actions] param. | |
Widget _adaptiveAction({required VoidCallback onPressed, required String text}) { | |
switch (defaultTargetPlatform) { | |
case TargetPlatform.android: | |
case TargetPlatform.fuchsia: | |
case TargetPlatform.linux: | |
case TargetPlatform.windows: | |
return TextButton(onPressed: onPressed, child: _materialDialogActionText(text)); | |
case TargetPlatform.iOS: | |
case TargetPlatform.macOS: | |
return CupertinoDialogAction(onPressed: onPressed, child: Text(text)); | |
} | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this the idea for inlining the _materialDialogActionText
?
return TextButton(onPressed: onPressed, child: Text(text, textAlign: TextAlign.end));
will update the commit message of the latest commit as well as per the guidelines
test/widgets/dialog_checks.dart
Outdated
@@ -6,21 +8,41 @@ import 'package:flutter_test/flutter_test.dart'; | |||
/// Checks for an error dialog matching an expected title | |||
/// and, optionally, matching an expected message. Fails if none is found. | |||
/// | |||
/// On success, returns the widget's "OK" button. | |||
/// On success, returns the widget's "OK" button | |||
/// (which is a [CupertinoDialogAction] for OS platforms). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can leave this dartdoc unchanged. It doesn't matter what specific widget the button is, as long as it responds to taps.
test/widgets/dialog_checks.dart
Outdated
final dialog = tester.widget<AlertDialog>(find.byType(AlertDialog)); | ||
tester.widget(find.descendant(matchRoot: true, | ||
of: find.byWidget(dialog.title!), matching: find.text(expectedTitle))); | ||
if (expectedMessage != null) { | ||
if (defaultTargetPlatform == TargetPlatform.iOS | ||
|| defaultTargetPlatform == TargetPlatform.macOS) { | ||
|
||
final dialog = tester.widget<CupertinoAlertDialog>(find.byType(CupertinoAlertDialog)); | ||
|
||
tester.widget(find.descendant(matchRoot: true, | ||
of: find.byWidget(dialog.content!), matching: find.text(expectedMessage))); | ||
} | ||
of: find.byWidget(dialog.title!), matching: find.text(expectedTitle))); | ||
|
||
return tester.widget( | ||
find.descendant(of: find.byWidget(dialog), | ||
matching: find.widgetWithText(TextButton, 'OK'))); | ||
if (expectedMessage != null) { | ||
tester.widget(find.descendant(matchRoot: true, | ||
of: find.byWidget(dialog.content!), matching: find.text(expectedMessage))); | ||
} | ||
|
||
return tester.widget( | ||
find.descendant(of: find.byWidget(dialog), | ||
matching: find.widgetWithText(CupertinoDialogAction, 'OK'))); | ||
|
||
} | ||
else { | ||
final dialog = tester.widget<Dialog>(find.byType(Dialog)); | ||
tester.widget(find.widgetWithText(Dialog, expectedTitle)); | ||
if (expectedMessage != null) { | ||
tester.widget(find.widgetWithText(Dialog, expectedMessage)); | ||
} | ||
return tester.widget( | ||
find.descendant(of: find.byWidget(dialog), | ||
matching: find.widgetWithText(TextButton, 'OK'))); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use an exhaustive switch
on defaultTargetPlatform
, like we do elsewhere. Also, there are several formatting nits that makes this code harder to read than it needs to be.
Proposal:
switch (defaultTargetPlatform) {
case TargetPlatform.android:
case TargetPlatform.fuchsia:
case TargetPlatform.linux:
case TargetPlatform.windows: {
final dialog = tester.widget<Dialog>(find.byType(Dialog));
tester.widget(find.widgetWithText(Dialog, expectedTitle));
if (expectedMessage != null) {
tester.widget(find.widgetWithText(Dialog, expectedMessage));
}
return tester.widget(
find.descendant(of: find.byWidget(dialog),
matching: find.widgetWithText(TextButton, 'OK')));
}
case TargetPlatform.iOS:
case TargetPlatform.macOS: {
final dialog = tester.widget<CupertinoAlertDialog>(
find.byType(CupertinoAlertDialog));
tester.widget(find.descendant(matchRoot: true,
of: find.byWidget(dialog.title!), matching: find.text(expectedTitle)));
if (expectedMessage != null) {
tester.widget(find.descendant(matchRoot: true,
of: find.byWidget(dialog.content!), matching: find.text(expectedMessage)));
}
return tester.widget(find.descendant(of: find.byWidget(dialog),
matching: find.widgetWithText(CupertinoDialogAction, 'OK')));
}
}
pubspec.lock
Outdated
@@ -315,10 +315,10 @@ packages: | |||
dependency: transitive | |||
description: | |||
name: file | |||
sha256: "5fc22d7c25582e38ad9a8515372cd9a93834027aacf1801cf01164dac0ffa08c" | |||
sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The changes to this file don't look related; please remove them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok thankyou for the feedback, will be sure to onboard these points when working on issues in the future. I'll fix these things up in a new commit.
(Misclick, sorry) |
a255919
to
db740f9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks. You'll need to tidy up your branch, as I mentioned above, before we can review this again. If you need help, please ask in #git help
in the development community.
yep my bad, will do so. Thanks for your patients with me on this. |
ed8abb7
to
9d2c4df
Compare
As was suggested in a comment of the pull request zulip#1017 (comment).
9e6fc98
to
373cd75
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, this is much closer! Small comments below.
Also, a few commit message nits:
dialog: display adaptive dialogs and action buttons based on the target platform
AlertDialog was changed to AlertDialog.adaptive to the effect described in #996.
_adaptiveAction was implemented to display a platform appropriate action for
AlertDialog.adaptive's actions param, as was also discussed in #996.
tests in dialog_test were updated to perform platform appropriate tests.
- This commit fixes an issue (🎉), so let's put a
Fixes: #996
line at the end of it. - Also, I think the paragraph ("AlertDialog was changed…") doesn't add anything that's not already obvious from reading the code changes and the linked issue, so let's just delete it.
dialog [nfc]: inline _materialDialogActionTest in _adaptiveAction
As was suggested in a comment of the pull request https://github.com/zulip/zulip-flutter/pull/1017#discussion_r1813819656.
-
The URL should be on a new line; we try to wrap to 68 columns except where doing so would make things more confusing. How about:
As suggested at: https://github.com/zulip/zulip-flutter/pull/1017#discussion_r1813819656
Then for both commit messages, use initial caps for the part after the prefix, so:
dialog: Display adaptive dialogs and action buttons based on the target platform
dialog [nfc]: inline _materialDialogActionTest in _adaptiveAction
For examples of commit messages in the project's style, see the project's Git history; I recommend Greg's excellent tip about how to do that.
As was suggested in a comment of the pull request zulip#1017 (comment).
373cd75
to
52d762d
Compare
52d762d
to
6166a0a
Compare
6166a0a
to
f91a8c5
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
Some new nits below, and also some more commit-message nits that I should have caught last time 🙂:
dialog: Display adaptive dialogs and action buttons based on the target platform
This summary line is too long, at 80 characters. How about:
dialog: Use Cupertino-flavored alert dialogs on iOS
This also has a bit more information: the fact that iOS was the platform getting the wrong-style dialog. (The fact that the dialog's buttons match the rest of the dialog isn't surprising enough to need a mention. 🙂)
For what the length limit actually is, see discussion, which I've just started 🙂. This was a helpful opportunity for me to spot a change in the zulip/zulip documentation that I'd missed!
dialog [nfc]: Inline _materialDialogActionTest in _adaptiveAction
The function's name is _materialDialogActionText
, not _materialDialogActionTest
.
f91a8c5
to
0a44828
Compare
all sorted :) |
1fbdb29
to
dca0970
Compare
dca0970
to
d4000cc
Compare
d4000cc
to
85d4820
Compare
85d4820
to
ea28216
Compare
ea28216
to
341453f
Compare
@gnprice ok I think I've made all those changes and cleaned up the commit history now |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks. This looks good except one comment below.
One other question: see this message about how we'll be crediting commits in the upcoming Zulip release blog post:
#general > Zulip 10.0 release credits: code contributions @ 💬
As is, this PR would cause you to be credited like so (either in the upcoming release blog post, or in the one after that if it's merged after that release):
3 Brynly Mitchell - u7088495
If that's how you'd like your name to appear, there's nothing more for you to do. If you'd like it written differently, you can use git commit --amend --author=…
to change it in a rebase. Then you can set your name in your Git config to control the name that future commits get automatically.
} | ||
|
||
// TODO(#996) update this to check for per-platform flavors of alert dialog | ||
void checkNoErrorDialog(WidgetTester tester) { | ||
check(find.byType(AlertDialog)).findsNothing(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, in #1017 (comment) I meant those two checks were redundant with each other. If there's no widget that's of a subtype of AlertDialog, there's certainly none that's of the exact type AlertDialog.
341453f
to
cf10499
Compare
cf10499
to
991a4fe
Compare
I see you've pushed a revision since my last review. Is this intended to be ready again for merge/review? (It's useful to make that clear with a comment, because people often push to a branch with intermediate revisions before pushing one they consider ready.) |
Ah yep It's just about ready but I just hadn't gotten around to doing a once-over to check everything looks alright. |
ok should be all good to go now :) |
@BrynMtchll I'm guessing you're the same person as @u7088495? Please pick a single account to stick to, at least for interacting with any given project (like Zulip) — it makes things less confusing 🙂 It looks like this has some merge/rebase conflicts after 0094978 / #1410. Would you rebase and resolve those? Then I think this will be all ready for merge. |
Sorry yes that's my other account, my mistake - I forgot that I switched over for a different project |
991a4fe
to
5e56125
Compare
5e56125
to
4af9eb5
Compare
4af9eb5
to
39a6ffe
Compare
Alright I think it's ready; I refactored the learn more test logic into |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the revision! There's one substantive change needed in the new test code, and a couple of easy nits.
text: zulipLocalizations.errorDialogLearnMore, | ||
), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: preserve formatting
text: zulipLocalizations.errorDialogLearnMore, | |
), | |
text: zulipLocalizations.errorDialogLearnMore), |
textAlign: TextAlign.end)); | ||
case TargetPlatform.iOS: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: a blank line to separate these cases helps make the structure easier to see:
textAlign: TextAlign.end)); | |
case TargetPlatform.iOS: | |
textAlign: TextAlign.end)); | |
case TargetPlatform.iOS: |
if (expectedLearnMoreButtonUrl != null) { | ||
check(testBinding.takeLaunchUrlCalls()).single.equals(( | ||
url: expectedLearnMoreButtonUrl, | ||
mode: LaunchMode.inAppBrowserView)); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checking for this button is useful, but this check doesn't work in this context. The check will work only if the caller has already gone and tapped on the button. There's nothing in this function's dartdoc that says the caller should do that, and it's not something a reader would naturally assume they need to do.
If a caller is going and tapping on the button themself, then the caller can also easily go and do this check — the check isn't using any specific knowledge about how the error dialogs work.
It looks like there's one call site that passes this option. So let's move this check to that call site.
This pull request closes #996.
In
dialog.dart
:Switched
alertDialog(
toalertDialog.adaptive(
, as per #996.Defined new private widget
_adaptiveAction
which displays aCupertinoDialogAction
for IOS and aTextButton
otherwise._adaptiveAction(
is used in place ofTextButton(
when stating dialog actions.The new result for IOS:

dialog-checks.dart
has been updated to check the text content of the respective dialog types depending on the platform